<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>主题活动</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <script src="../js/rem.js"></script>
    <div id="app">
      <img src="../image/bj1.png" alt="" class="beijing" />
      <!-- 地图预留 -->
      <div class="map-wrap">
        <div class="map"></div>
      </div>

      <div class="box">
        <div class="button-box">
          <img
            :src="`../image/btn-${i+1}.png`"
            alt=""
            v-for="(item,i) in Array(7)"
            :key="i"
            class="bnt-image"
            @click="btnClick(i)"
          />
        </div>
      </div>

      <img src="../image/btn-zhuti.png" alt="" class="btn-zhuti" />

      <!-- 二维码预留 -->
      <img src="../image/qrcode.png" alt="" class="QRcode" />
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {},
        methods: {
          btnClick(i) {
            switch (i) {
              case 0:
                window.open('/src/exhibition/index.html', '_self')
                break
              case 1:
                window.open('/src/introduce/index.html', '_self')
                break
              case 3:
                window.open('/src/strive/index.html', '_self')
                break
              default:
                break
            }
          }
        }
      })
    </script>
  </body>
</html>
